<template>
  <div class="boss noSelect">
    <div class="body">
      <el-button class="noBorder noPaddingMargin noBack">
        <svg @click="toggleOpen" v-show="show" t="1639508331370" class="icon" viewBox="0 0 1088 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="906" width="32" height="32"><path d="M459.2 441.984h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8h-480a8 8 0 0 0-8 8v56c0 4.416 3.584 8 8 8z m-8 204.032c0 4.416 3.584 8 8 8h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8h-480a8 8 0 0 0-8 8v56zM955.2 160H171.2a8 8 0 0 0-8 8V224c0 4.416 3.584 8 8 8h784a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8z m0 632H171.2a8 8 0 0 0-8 8v56c0 4.416 3.584 8 8 8h784a8 8 0 0 0 8-8V800a8 8 0 0 0-8-8zM166.592 518.912l156.288 123.072c5.76 4.608 14.4 0.512 14.4-6.912V388.928a8.832 8.832 0 0 0-14.4-6.912L166.592 505.088a8.768 8.768 0 0 0 0 13.824z" p-id="907" fill="#2c2c2c"></path></svg>
        <svg @click="toggleOpen" v-show="!show" t="1639510015796" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1653" width="32" height="32"><path d="M408 441.984h480A8 8 0 0 0 896 433.984v-56a8 8 0 0 0-8-8h-480a8 8 0 0 0-8 8v56c0 4.416 3.584 8 8 8z m-8 204.032c0 4.416 3.584 8 8 8h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8h-480a8 8 0 0 0-8 8v56zM904 160H120a8 8 0 0 0-8 8V224c0 4.416 3.584 8 8 8h784a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8z m0 632H120a8 8 0 0 0-8 8v56c0 4.416 3.584 8 8 8h784a8 8 0 0 0 8-8V800a8 8 0 0 0-8-8z m-761.6-149.888l156.288-123.136a8.832 8.832 0 0 0 0-13.888L142.4 381.888A8.896 8.896 0 0 0 128 388.8v246.272c0 7.424 8.512 11.648 14.4 7.04z" p-id="1654"></path></svg>
      </el-button>
      <h1 class="noMargin noSelect">
        <slot name="titleIt"></slot>
      </h1>
    </div>
    <div class="inputIt">
      <div class="noPadding inputItBack flex-row">
        <el-input
            class="el-input insertTask"
            v-model="taskTitle"
            @keydown.native.enter="insertTask($event)"
            :style="{'width': tWidth}"
            :placeholder="'添加当前的任务进入:\' '+$slots.titleIt[0].text+ ' \'' "
        >
          <i @click="selectDate()"  slot="suffix" class="el-input__icon el-icon-date"></i>
        </el-input>
        <transition name="el-zoom-in-top">
          <el-date-picker
            class="insertDate transition-box"
            v-model="settingDate"
            v-show="!show_2"
            type="daterange"
            style="width: 330px;margin-left: 3%;padding-right: 0"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions">
          </el-date-picker>
        </transition>
      </div>
    </div>

  </div>

</template>

<script>

import {mapActions, mapState} from "vuex";
import {HttpManager} from "@/api";

export default {
name: "ManPageRightHeader",
  data(){
    return{
      task:{
        taskId:'',taskTitle:'',taskDescription:'',
        taskStatus:'',taskGmtStart:'',taskGmtOver:'',
        taskGmtCreate:'',taskGmtUpdate:'',taskVersion:'',
        taskDeleted:'',userId:''
      },
      taskTitle:'',
      show:true,
      show_2:true,
      tWidth:'100%',
      settingDate:[],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  computed:{
    ...mapState('module1',['tasks','todayTasks'])
  },
  methods:{
  ...mapActions('module1',['getTasks','addTasks','addTodayTasks']),
    changeFormat(date) {
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? '0' + m : m;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      return y+ '-' + m + '-' + d;
    },
  //使ManPageMiddle抽屉式展开或者隐藏
    toggleOpen(){
      this.show=!this.show
      this.$bus.$emit('turnIt',{isShow:this.show})
    },
    selectDate(){
      this.show_2 = !this.show_2
    },
    insertTask(){
    if(this.settingDate.length !== 0){
      this.task.taskGmtStart = this.settingDate[0]
      this.task.taskGmtOver = this.settingDate[1]
    }else{
      this.task.taskGmtStart = this.changeFormat(new Date(this.$slots.taskGmtStart[0].text)).toString()
      this.task.taskGmtOver = this.changeFormat(new Date(this.$slots.taskGmtOver[0].text)).toString()
    }
      this.task.taskStatus = 0
      this.task.userId = this.$cookie.get('userId')
      this.task.taskTitle = this.taskTitle


      this.addTasks(this.task)
      this.addTodayTasks(this.task)

      let it = new URLSearchParams()
      it.append('task',JSON.stringify(this.task))
      HttpManager.insertTask(it).then(()=>{
        this.taskTitle = ''
        this.task.userId = ''

      })
    },
  }
}
</script>

<style scoped>
.boss{
  min-width: 600px;
  flex-direction: column!important;
}
.body{
  margin-top: 12px;
  margin-left: 10px;
  display: flex;
  flex-direction: row;
  width: 100%;
}
h1{
  padding-left: 10px;
  padding-top: 0;
  position: relative;
  top: -4px;
}
.el-input{
  width: 100%;
}
.inputIt{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.inputItBack{
  background: #ffffff;
  width: 90%;
  border-radius: 8px;
}
.el-icon-date:hover{
  color: #0774a4;
  cursor: pointer;
}
</style>
